/* eslint-disable no-param-reassign */
import './index.less'
import {CnBoldP, CnNormalP} from '@/components/text'
import {WaterAnalyzeCard} from './components/waterAnalyzeCard'
import {WaterOverviewCard} from './components/waterOverviewCard'
import {ParamTableCard} from './components/paramTableCard'
import {
  uSelectSingleParamDataStatistic,
  uSelectSingleParamExceptionDistribution
} from '@/api/singleParam'
import useGlobalAPI from '@/hooks/useGlobalAPI'
import dayjs from 'dayjs'
export default defineComponent({
  name: 'singleParam',
  setup() {
    const {route} = useGlobalAPI()
    const state = reactive<{
      dateTime: [string, string]
      waterOverview: SingleParam.WaterOverview | null
      waterOverviewSpinning: boolean
      abnormalDivision: SingleParam.AbnormalDivision | null
      abnormalDivisionSpinning: boolean
      paramTableSpinning: boolean
    }>({
      dateTime: [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD 23:59:59')],
      waterOverview: null,
      waterOverviewSpinning: false,
      abnormalDivision: null,
      abnormalDivisionSpinning: false,
      paramTableSpinning: false
    })

    function getWaterOverview(devId?: string, paramName?: string) {
      devId = devId || (route.query.devId as string)
      paramName = paramName || (route.query.paramName as string)
      if (!devId) return
      if (!paramName) return
      state.waterOverviewSpinning = true
      uSelectSingleParamDataStatistic({
        devId,
        startTime: state.dateTime[0],
        endTime: state.dateTime[1],
        paramName
      })
        .then(res => {
          if (res) {
            state.waterOverview = res.data
          }
          state.waterOverviewSpinning = false
        })
        .catch(err => {
          state.waterOverviewSpinning = false
        })
    }

    function getAbnormalDivision(devId?: string, paramName?: string) {
      devId = devId || (route.query.devId as string)
      paramName = paramName || (route.query.paramName as string)
      if (!devId) return
      if (!paramName) return
      uSelectSingleParamExceptionDistribution({devId, paramName})
        .then(res => {
          if (res) {
            state.abnormalDivision = res.data
          }
        })
        .catch(err => {})
    }

    // function getParamTable(devId?: string, paramName?: string) {
    //   devId = devId || route.query.devId as string
    //   paramName = paramName || route.query.paramName as string
    //   if (!devId) return
    //   if (!paramName) return
    //   uSelectCheckDataByQueryVo({ devId, paramName, page: 1, size: 20 }).then(res => {
    //     if (res) {
    //       state.paramTable = res.data.list
    //     }
    //   }).catch(err => { })
    // }

    function getPageData() {
      const devId = route.query.devId as string
      const paramName = route.query.paramName as string
      if (!devId) return
      if (!paramName) return
      getWaterOverview(devId, paramName)
      getAbnormalDivision(devId, paramName)
      // getParamTable(devId, paramName)
    }

    watch(
      () => state.dateTime,
      (n, o) => {
        if (n[0] !== o[0] || n[1] !== o[1]) {
          getWaterOverview()
        }
      }
    )

    onMounted(() => {
      getPageData()
    })

    return () => (
      <div class='singleDevParams'>
        <CnBoldP class='mt-11 text-20'>设备水质数据</CnBoldP>
        <CnNormalP class='mt-6 text-4xText'>
          查看设备检测到的水质数据，并根据数据优化您的运营
        </CnNormalP>
        <div class='mt-26 grid grid-cols-3 gap-x-20 gap-y-20 relative'>
          {state.waterOverview ? (
            <WaterOverviewCard
              v-model={[state.dateTime, 'dateTime']}
              spinning={state.waterOverviewSpinning}
              waterOverview={state.waterOverview}
            ></WaterOverviewCard>
          ) : (
            <div class='col-span-2 row-span-2'></div>
          )}

          {state.abnormalDivision ? (
            <WaterAnalyzeCard abnormalDivision={state.abnormalDivision}></WaterAnalyzeCard>
          ) : (
            <div class='col-span-1'></div>
          )}
        </div>

        {state.waterOverview ? (
          <ParamTableCard waterOverview={state.waterOverview}></ParamTableCard>
        ) : null}
      </div>
      // <div>nps</div>
    )
  }
})
